import Viewer from './viewer'
import Vue from 'vue'

// let loadingComponent = ''
export default {
  viewer() {
  },
  install: function() {
    let component = ''
    function viewer(el) {
      Vue.nextTick(() => {
        const img = el.querySelectorAll('img')
        // img类名中是否包含了跳过标识（主要处理场景：用户鼠标悬浮图片放大，后点击图片使用viewer组件。会重复获取悬浮的图片问题
        const imgList = [...img].filter(i => !/skipViewer/.test(i.className))
        for (let i = 0; i < imgList.length; i++) {
          imgList[i].onclick = function() {
            document.body.appendChild(component.$el)
            component.open(imgList, i)
          }
        }
      })
    }

    Vue.directive('viewer', {
      bind(el) {
        let Loading = Vue.extend(Viewer)
        const propsData = {}
        component = new Loading({
          propsData
        }).$mount()
        viewer(el)
      },
      update: function(el) {
        viewer(el)
      }
    })
  }
}
